import React, { useState,  useTransition } from "react";



function App() {

    const [inpValue, setInpValue] = useState('')
    const [count, setCount] = useState(100)

    const [isPending, startTransition] = useTransition()




    return <div>
        <h1>App - {inpValue}</h1>
        <input value={inpValue} onChange={e => {
            setInpValue(e.target.value)
        }} type="text" />

        <button onClick={() => {

            setInpValue(inpValue + '1')

            startTransition(() => {
                // 开启非阻塞模式，当有其他数据更新的时候优先更新其他数据
                // 优先更新其他数据，在空闲的时候在来更新自己
                setCount(count + 1)
            })
        }} >点击加 - {count}</button>


        {isPending && <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>}
    </div>
}


export default App